<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜡笔小新</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        body{
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    background-image: url('images/background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
    </style>
</head>
<body>
    <main>
        <div class="about-banner">
            <img src="images/header.jpg">
        </div>
        <nav>
            <li><a href="home.html">首页</a></li>
            <li><a href="role.html">人物介绍</a></li>
            <li><a href="collection.html">精彩合集</a></li>
            <li><a href="heji.html">主题合集</a></li>
             <li><a href="contact.html">联系我们</a></li>
            <li><a href="#">登录注册</a></li>
        </nav>
        <div class="video-container">
            <div class="vedio-and-text">
            <video id="vedio-player" controls width="800" height="450" poster="images/poster.jpg" muted>
                <source src="images/hilight.mp4">
            </video>
            <div class="text-narrate">
                <p>这段视频展现了蜡笔小新的搞怪日常，他调皮捣蛋的样子让人忍俊不禁，快来一起感受他的欢乐世界吧！</p>
            </div>
           </div>
           <div class="video-and-text">
            <video id="vedio-player" controls width="800" height="450"  muted>
                <source src="images/hilight2.mp4">
            </video>
            <div class="text-narrate">
                <p>这里记录了小新和小伙伴的有趣冒险，他们之间的互动充满了童真和友爱，十分温馨。</p>
            </div>
            </div>
            <div class="vedio-and-text">
            <video id="vedio-player" controls width="800" height="450"  muted>
                <source src="images/hilight3.mp4">
            </video>
            <div class="text-narrate">
                <p>此视频聚焦小新的奇妙想法和创意行为，他总能以独特的视角看待生活，带来不一样的惊喜。</p>
            </div>
            </div>
            <div class="play-btn" onclick="playVideo()"></div>
        </div>
        <script src="JS/javascript.js"></script>
         <footer>蜡笔小新粉丝集聚地</footer>
    </main>
</body>